import React, { Component } from 'react'
import "./usercenter.scss"
import { Radar } from '@ant-design/charts';
import { DataSet } from '@antv/data-set';
import { getApiUserCenter } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class usercenter extends Component {

    state = {
        udata:[
            { "item": "今日在线时长", "全站平均值": 70, "您的数据": 30 },
            { "item": "证书获得数量", "全站平均值": 60, "您的数据": 70 },
            { "item": "笔记数量", "全站平均值": 50, "您的数据": 60 },
            { "item": "答题正确率", "全站平均值": 40, "您的数据": 50 },
            { "item": "课程学习时间", "全站平均值": 60, "您的数据": 70 },
        ],
        dv:[],

        list:[],
        arr:[],

        testArr:[],

        data:{}
    }

    componentWillReceiveProps(){
        
    }

    componentWillMount(){
        window.scroll(0,0)
        const { DataView } = DataSet;
        const dv = new DataView().source(this.state.udata);

        dv.transform({
            type: 'fold',
            fields: ['全站平均值', '您的数据'], // 展开字段集
            key: 'user', // key字段
            value: 'score', // value字段
        });

        this.setState({
            dv
        })

        this.getData();
    }

    getData=()=>{
        let param = {
            token:get('token'),
            type:get('type')?get('type'):0,
            // content:get('city')?get('city'):get('mechanism'),
        }

        getApiUserCenter(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data.course_list,
                    arr:data.live_list,
                    data:data.info,
                    testArr:data.exam_list
                })
            }
        }).catch(err =>{
            console.error(err);
        })
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/courseinfo?id='+id);
    }

    gotoExam=(data)=>{
        this.props.history.push('/exam?id='+data.course_id+'&chapter_id='+data.chapter_id+"&content_id="+data.content_id);
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    render() {
        return (
            <div className="usercenter">

                <div className="uleft">
                    <div className='udata'>
                        <div className="up1" style={{backgroundImage:"url('assets/imgs/gerenzhongxin-1beijing.png')"}}>
                            <div className="item">
                                <h2>{this.state.data.last}</h2>
                                <div className="cen">
                                    <span></span>
                                </div>
                                <p>同上次比较</p>
                            </div>
                            <div className="item">
                                <h1>{this.state.data.new_score}</h1>
                                <div className="cen">
                                    <span></span>
                                </div>
                                <p>最新考试成绩</p>
                            </div>
                            <div className="item">
                                <h2>{this.state.data.overstep}%</h2>
                                <div className="cen">
                                    <span></span>
                                </div>
                                <p>超越用户</p>
                            </div>
                        </div>

                        <div className="up2" style={{backgroundImage:"url('assets/imgs/gerenzhongxin-2beijing.png')"}}>
                            <div className="utitle">
                                <h2>平台数据分析</h2>
                                <p>个人数据与全站数据</p>
                            </div>
                            <div className="utu">
                            <Radar 
                                data = {this.state.dv.rows}
                                xField = {'item'}
                                yField = {'score'}
                                seriesField = {'user'}
                                legend={ {
                                    position: 'left-bottom',
                                    itemName:{
                                        fill:"rgba(0, 0, 0, 0.45)",
                                        style:{
                                            fill:"rgba(0, 0, 0, 0.45)"
                                        },
                                    },
                                }}
                                label = {{
                                    style:{
                                        fill:"rgba(0, 0, 0, 0.45)"
                                    }
                                }}
                                appendPadding={[10,10,10,10]}
                                xAxis = {{
                                line: null,
                                tickLine: null,
                                style:{
                                    fill:"rgba(0, 0, 0, 0.45)"
                                },
                                label:{
                                    style:{
                                        fill:"rgba(0, 0, 0, 0.45)"
                                    },
                                },
                                grid: {
                                    line: {
                                    style: {
                                        lineDash: null,
                                    },
                                    }
                                },
                                }}
                                yAxis = {{
                                line: null,
                                tickLine: null,
                                label:{
                                    style:{
                                        fill:"rgba(0, 0, 0, 0.45)"
                                    },
                                },
                                grid: {
                                    line: {
                                    type: 'line',
                                    style: {
                                        lineDash: null,
                                    },
                                    },
                                },
                                }}
                                // // 开启面积
                                area = {{}}
                            />
                            </div>
                        </div>
                    </div>

                    <div className="u_course">
                    <div className="title">最近课程</div>
                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/wutuanti.png" />
                        </div>
                        <p>暂无课程记录</p>
                    </div>
                    <div className="box" hidden={this.state.list.length === 0}>
                        {
                            this.state.list.map((item,index)=>{
                                return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.courses.id)}}>
                                            <div className="itop" style={{backgroundImage:"url('"+item.courses.image_text+"')"}}>
                                                <div className="span">精品</div>
                                                <div className="progress">
                                                    <h2>进度</h2>
                                                    <div>
                                                        <span style={{width:item.jd+'%'}}></span>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div className="ibom">
                                                    <h2>{item.courses.title}</h2>
                                                    <p>{item.mtitle}</p>
                                                    <p>{item.tname}老师</p>
                                                    <div className="idiv">
                                                        <div>{item.nums}课时</div>
                                                        <h4>{item.courses.sale_num}人参加</h4>
                                                    </div>
                                                </div>
                                        </div>
                            })
                        }

                        
                    </div>
                </div>

                    <div className="u_order">
                        <div className="title">最新预约</div>
                        <div className="none" hidden={this.state.arr.length !== 0}>
                            <div className="cen">
                                <img alt="" src="assets/imgs/wudingdan.png" />
                            </div>
                            <p>暂无预约记录</p>
                        </div>
                        <div className="box" hidden={this.state.arr.length === 0}>
                            {
                                this.state.arr.map((item,index)=>{
                                    return <div className="item" key={index} onClick={()=>{this.gotoPage('/liveinfo?id='+item.live.id)}}>
                                                <div className="itop" style={{backgroundImage:"url('"+item.live.thumb_text+"')"}}>
                                                    {/* <img alt="" src="assets/imgs/bofang.png" /> */}
                                                    <div className="imark" >
                                                        <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                    </div>
                                                    <div className="ido" hidden={item.is_open !== 1}>
                                                        <img alt="" src="assets/imgs/do.gif" />
                                                        <p>正在直播中</p>
                                                    </div>
                                                </div>
                                                <div className="ibom">
                                                    <h2>{item.live.title}</h2>
                                                    <p>{item.mtitle}</p>
                                                    <p>{item.tname}老师</p>
                                                    <div className="idiv">
                                                        <div>{item.live.start_time?item.live.start_time+"开始":"暂未设置开始时间"}</div>
                                                        <h4>{item.live.nums}人参加</h4>
                                                    </div>
                                                </div>
                                            </div>
                                })
                            }
                        </div>
                    </div>
                </div>
                {/* <div className="uright">
                    <div className="u_course">
                        <div className="title">最近课程</div>
                        <div className="none" hidden={this.state.list.length !== 0}>
                            <div className="cen">
                                <img alt="" src="assets/imgs/wutuanti.png" />
                            </div>
                            <p>暂无课程记录</p>
                        </div>
                        <div className="box" hidden={this.state.list.length === 0}>
                            {
                                this.state.list.map((item,index)=>{
                                    return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.courses.id)}}>
                                                <div className="itop" style={{backgroundImage:"url('"+item.courses.image_text+"')"}}>
                                                    <div className="span">精品</div>
                                                    <div className="progress">
                                                        <h2>进度</h2>
                                                        <div>
                                                            <span></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="idiv">
                                                    <h2>{item.courses.title}</h2>
                                                    <div className="items">
                                                        <div className="it">
                                                            <img alt="" src="assets/imgs/renhsu.png" />
                                                            <p>{item.courses.sale_num}人</p>
                                                        </div>
                                                        <div className="it">
                                                            <img alt="" src="assets/imgs/leixing.png" />
                                                            <p>{item.courses.nums}课</p>
                                                        </div>
                                                        <div className="it">
                                                            <img alt="" src="assets/imgs/leibie.png" />
                                                            <p>{item.courses.label}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                })
                            }

                            
                        </div>
                    </div>
                </div> */}

                <div className="udata">

              
                </div>

                

          

                <div className="utest">
                    <div className="title">最近考试</div>

                    <div className="none" hidden={this.state.testArr.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/wuxiaoxi.png" />
                        </div>
                        <p>暂无考试记录</p>
                    </div>


                    {
                        this.state.testArr.map((item,index)=>{
                            return <div className="item" key={index} onClick={()=>{this.gotoExam(item)}}>
                                        <div className="itop">
                                            <div className="ileft">
                                                <h2>{item.title}</h2>
                                                <span>{item.course_title}</span>
                                            </div>
                                            <button>重新考试</button>
                                        </div>
                                        <div className="iright">
                                            <h2 className={item.score < 60 ? "red" :""}>{item.score}</h2>
                                            <p>测试记录最高得分（分）</p>
                                            <span>{item.completion_time_text}</span>
                                        </div>
                                    </div>
                        })
                    }
                </div>
            
            
            </div>
        )
    }
}
